<template>
	<view class="top_search">
		<uv-input placeholder="搜索您感兴趣的课程" clearable v-model="name" prefixIcon="search"
				  prefixIconStyle="font-size: 22px;color: #909399">
			<template v-slot:suffix>
				<uv-button @click="jump_search" type="default" size="mini" :hairline="true" color="#F1F1F5"
						   :customTextStyle="{color:'#323233',fontSize:'14px'}" text="搜索"></uv-button>
			</template>
		</uv-input>
	</view>
</template>

<script>
	export default {
		props: {
			keyword: {
				type: String,
				default: ''
			},
		},
		computed: {
			processedKeyword() {
				this.name = this.keyword
			}
		},
		data() {
			return {
				name: ''
			}
		},
		methods: {
			jump_search() {
				uni.navigateTo({
					url: "/pages/category/index?keyword=" + this.name
				});
			}
		}
	}
</script>

<style lang="scss">
	.top_search {
		padding: 4rpx;

		::v-deep .uv-button {
			padding: 13px 8px;
		}
	}
</style>